AppBuilder - Rewrite system prompt, add preview awareness and clickable preview links#302
Draft
AppBuilder - Rewrite system prompt, add preview awareness and clickable preview links#302
Conversation
…ble preview links - Rewrite system prompt to use non-technical language with vocabulary guide, preview awareness section, and good/bad examples - Send current preview path with each message so the LLM knows which page the user is viewing (prepended as context to the prompt) - Make relative links in assistant messages clickable to navigate the preview iframe via postMessage, using a callback pattern on ProjectManager - Validate previewPath schema: must start with /, no whitespace, max 2048 chars
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
[take a look](/about)) clickable to navigate the preview iframe viapostMessageDetails
System prompt (
constants.ts): Replaces the old prompt with sections for how to talk to the user, a vocabulary guide (avoid technical terms by default), preview awareness (link to relevant pages after changes), project conventions, and concrete good/bad examples.Preview path plumbing:
streaming.tsreads the current iframe URL from the store and extracts the pathname. This is passed aspreviewPaththrough the tRPC schema → service layer, where it's prepended to the user's message as[The user is currently viewing: /path]. Schema validates it must start with/, contain no whitespace, and be ≤2048 chars.Clickable preview links (
MessageContent.tsx,AppBuilderChat.tsx,AppBuilderPreview.tsx,ProjectManager.ts): Relative links in markdown are intercepted and routed throughmanager.navigatePreview(path), which calls a handler registered byAppBuilderPreviewthat posts a navigation message to the iframe. Uses a direct callback pattern — no state stored; if the iframe isn't ready, the click is a no-op and the user can click again.